﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Jskit Test </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../main.css" >
<script src="../../release/jskit.core.js"></script>
    <script src="../JskitConfig_doc.js"></script>

<script>
//btn_build
function buildWinOpenCode(){
	var url = $$("#url").value;
	url = url.trim();
	if(url==""){
		alert("URL是必须的");
		$$("#url").focus();
		return;
	}
	var str = "window.open(\""+url+"\"";
	if($$("#handler").value!=""){
		str += ",\""+$$("#handler").value+"\"";
	}else{
		str += ",\"\"";
	}
	var parm = "";
	if($$("#width").value!=""){
		parm += ",width="+$$("#width").value;
	}
	if($$("#height").value!=""){
		parm += ",height="+$$("#height").value;
	}
	if($$("#cb_center").checked){
		var _height = ($$("#height").value=="")?0:$$("#height").value;
		var _width = ($$("#width").value=="")?0:$$("#width").value;
		parm += ",top=\"+(document.body.clientHeight-"+_height+")/2+\" ";
		parm += ",left=\"+(document.body.clientWidth-"+_width+")/2+\" ";
	}else{
		if($$("#top").value!=""){
			parm += ",top="+$$("#top").value;
		}
		if($$("#left").value!=""){
			parm += ",left="+$$("#left").value;
		}
	}
	if($$("#toolbar").value!="yes"){
		parm += ",toolbar=no";
	}
	if($$("#menubar").value!="yes"){
		parm += ",menubar=no";
	}
	if($$("#resizable").value!="yes"){
		parm += ",resizable=no";
	}
	if($$("#location").value!="yes"){
		parm += ",location=no";
	}
	if($$("#status").value!="yes"){
		parm += ",status=no";
	}
	if($$("#scrollbars").value!="yes"){
		parm += ",scrollbars=no";
	}
	if(parm!=""){
		parm = "prefix"+parm;
		parm = parm.replace("prefix,","");
		str += ",\""+parm+"\"";
	}
	str += ");";
	$$("#mtxt_code").value = str;
}
function previewWinOpenCode(){
	buildWinOpenCode();
	if($$("#mtxt_code").value!=""){
		eval($$("#mtxt_code").value);
	}
}
function setCenterDisplay(rObj){
	if(rObj.checked){
		$$("#top").disabled = true;
		$$("#left").disabled = true;
	}else{
		$$("#top").disabled = false;
		$$("#left").disabled = false;
	}
}
</script>
<style>
INPUT.txt_input{width:200px;background-color:#ffffe0;
}
INPUT.txt_input2{width:100px;background-color:#ffffe0;
}
SELECT{
	background-color:#ffffe0;
}
TEXTAREA{
	background-color:#ffffe0;
}
TD{
	padding:2px 2px 2px 2px;
}
.caption{
	text-align:right;
	font-weight:bold;
	width:60px;
}
.btn_build{
	width:300px;
}
.btn_preview{
	width:100px;
}
</style>
</HEAD>

<BODY>
<div>
<table>
	<tr>
		<td valign="top" style="border:1x solid #cccccc;background-color:#f4f4f4;">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td class="caption">URL</td>
					<td class="setting"><input type="text" class="txt_input" id="url" /></td>
				</tr>
				<tr>
					<td class="caption">Name</td>
					<td class="setting"><input type="text" class="txt_input" id="handler" /></td>
				</tr>
				<tr>
					<td class="caption">Width</td>
					<td class="setting"><input type="text" class="txt_input" id="width" /></td>
				</tr>
				<tr>
					<td class="caption">Height</td>
					<td class="setting"><input type="text" class="txt_input" id="height" /></td>
				</tr>
				<tr>
					<td colspan="2">
						<table width="100%" cellpadding="0" cellspacing="0">
							<tr>
								<td class="caption">Top</td>
								<td class="setting"><input type="text" class="txt_input2" id="top" /></td>
								<td class="setting" rowspan="2">
									<input type="checkbox" id="cb_center" onclick="setCenterDisplay(this)" />Center
								</td>
							</tr>
							<tr>
								<td class="caption">Left</td>
								<td class="setting"><input type="text" class="txt_input2" id="left" /></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<td valign="top" style="border:1x solid #cccccc;background-color:#f4f4f4;">
			<table>
				<tr>
					<td class="caption">toolbar</td>
					<td class="setting"><select id="toolbar"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
				<tr>
					<td class="caption">menubar</td>
					<td class="setting"><select id="menubar"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
				<tr>
					<td class="caption">resizable</td>
					<td class="setting"><select id="resizable"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
				<tr>
					<td class="caption">location</td>
					<td class="setting"><select id="location"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
				<tr>
					<td class="caption">status</td>
					<td class="setting"><select id="status"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
				<tr>
					<td class="caption">scrollbars</td>
					<td class="setting"><select id="scrollbars"><option value="yes">yes</option><option value="no">no</option></select></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<button id="btn_build" class="btn_build" onclick="buildWinOpenCode()" >Build window.open scripts</button>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="btn_preview" class="btn_preview" onclick="previewWinOpenCode()">Preview</button>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<textarea rows="5" cols="50" id="mtxt_code">
			</textarea>
		</td>
	</tr>
</table>
</div>
</BODY>
</HTML>
